<template>
  <div class="goods">
    <div class="goods-left">
      <input type="checkbox" :checked = "state" @change="stateChange">
      <img :src="pic"  style="width:80px ;height:80px">
    </div>
    <div class="goods-right">
      <p>{{title}}</p>
      <p class="bot-1">￥ {{price}}</p>
      <Counter></Counter>
    </div>
  </div>
</template>

<script>
import Counter from '@/components/Counter/Counter.vue'
export default {
  props:{
    id:{
      required:true,
      type:Number
    },
    // 要渲染的商品名称
    title:{
      default:'',
      type:String
    },
    //要渲染的商品图片
    pic:{
      default:'',
      type:String
    },
    price:{
      default:0,
      type:Number
    },
    state:{
      default:true,
      type:Boolean
    }
  },
  components:{
    Counter
  },
  methods:{
    stateChange(e){
      const newState = e.target.checked
      //触发自定义事件
      this.$emit('stateChange',{id:this.id,val:newState})
    }
  }
}
</script>

<style lang = "less" spcoed>
.goods {
  display: flex;
  width: 100%;
  height: 105px;
  line-height: 80px;
  padding-top: 10px;
  padding-left: 8px;
  padding-right: 8px;
  border-bottom: 1px solid #acaca9;
  .goods-left{
    flex: 1;
    img{
      padding-left: 5px;
    }
  }
  .goods-right{
    flex: 2;
    font-size: 12px;
    line-height: 20px;
    .bot-1 {
      font-weight: 700;
      color: red;
      margin-top: 10px;
    }
  }
  
}
</style>